<template>
    <div class="charging-mode-container">
        <div class="mode-card">
            <div class="card-header">
                <h2>修改充电模式</h2>
                <p>请选择您需要的充电模式</p>
            </div>

            <a-form 
                @submit.prevent="submit"
                class="mode-form"
                :model="formState"
            >
                <a-form-item label="车牌号">
                    <a-input 
                        v-model:value="formState.car_id"
                        class="form-input"
                    >
                        <template #prefix>
                            <el-icon><Van /></el-icon>
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="充电模式">
                    <a-select 
                        v-model:value="formState.request_mode"
                        class="form-select"
                    >
                        <a-select-option value="quick">
                            <div class="mode-option">
                                <el-icon><Lightning /></el-icon>
                                <span>快充模式</span>
                                <small>适合快速充电需求</small>
                            </div>
                        </a-select-option>
                        <a-select-option value="slow">
                            <div class="mode-option">
                                <el-icon><Timer /></el-icon>
                                <span>慢充模式</span>
                                <small>适合长时间充电</small>
                            </div>
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item>
                    <a-button 
                        type="primary" 
                        html-type="submit"
                        class="submit-button"
                        :loading="loading"
                    >
                        <template #icon><el-icon><Check /></el-icon></template>
                        确认修改
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { Van, Lightning, Timer, Check } from '@element-plus/icons-vue'

export default {
    components: {
        Van,
        Lightning,
        Timer,
        Check
    },
    setup() {
        const loading = ref(false)
        const formState = reactive({
            car_id: sessionStorage.getItem('car_id'),
            request_mode: 'quick'
        })

        const submit = async () => {
            loading.value = true
            try {
                const response = await fetch(process.env.VUE_APP_BACKEND_URL + '/user/chMode', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        car_id: formState.car_id,
                        request_mode: formState.request_mode
                    })
                })

                const data = await response.json()
                if (data && data.code === 0) {
                    message.success('充电模式修改成功')
                } else {
                    message.error(data.msg || '修改失败')
                }
            } catch (error) {
                message.error(error.message || '网络错误，请稍后重试')
            } finally {
                loading.value = false
            }
        }

        return {
            formState,
            loading,
            submit
        }
    }
}
</script>

<style scoped>
.charging-mode-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: var(--background-light);
}

.mode-card {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    animation: slideUp 0.5s ease;
}

.card-header {
    text-align: center;
    margin-bottom: 32px;
}

.card-header h2 {
    color: var(--primary-color);
    font-size: 24px;
    margin-bottom: 8px;
}

.card-header p {
    color: var(--text-gray);
    font-size: 16px;
}

.mode-form {
    margin-top: 24px;
}

.form-input,
.form-select {
    width: 100%;
}

.mode-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mode-option .el-icon {
    font-size: 20px;
    color: var(--primary-color);
}

.mode-option span {
    font-weight: 500;
}

.mode-option small {
    color: var(--text-gray);
    margin-left: auto;
}

.submit-button {
    width: 100%;
    height: 44px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.submit-button:active {
    transform: translateY(0);
}

:deep(.ant-form-item-label > label) {
    color: var(--text-dark);
    font-weight: 500;
}

:deep(.ant-input-affix-wrapper) {
    border-radius: var(--border-radius-sm);
    border-color: #dcdfe6;
    transition: all var(--transition-fast);
}

:deep(.ant-input-affix-wrapper:hover) {
    border-color: var(--primary-color);
}

:deep(.ant-input-affix-wrapper-focused) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(43, 51, 145, 0.1);
}

:deep(.ant-select-selector) {
    border-radius: var(--border-radius-sm) !important;
    border-color: #dcdfe6 !important;
    transition: all var(--transition-fast) !important;
}

:deep(.ant-select-selector:hover) {
    border-color: var(--primary-color) !important;
}

:deep(.ant-select-focused .ant-select-selector) {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(43, 51, 145, 0.1) !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .charging-mode-container {
        padding: 16px;
    }

    .mode-card {
        padding: 24px;
    }

    .card-header h2 {
        font-size: 20px;
    }

    .card-header p {
        font-size: 14px;
    }
}
</style>
